i think this should be removed from the PR since we're only using pnpm? you could try running
git checkout main -- [path-to-package-lock.json]
then commit and push

yes! or u can directly just delete the entire file

you could simplify this to {password && !passwordComplexity && passwordComplexityError ...

would it be easier to change these variables to more descriptive names? lowkey got a bit confused haha, maybe isPasswordComplexityMet or something similar would help to differentiate it from passwordComplexityError

good point! agreed about renaming

see my comment on the AuthContext PR - let's comment this out and remove this file since we don't want this route to be active on the app rn.

let's delete this file if it's empty!

nice! this is all right for now, but we eventually want to use the icons from figma.
i'd recommend exporting greenCheck and redCross icons as svg's from figma and adding them to the project. If you rebase from main, you'll be able to use the icon component i added!

this line should be deleted!

eventually we want to replace the inline styling with Styled Components

if password is not able to be of type null, we don't need this additional password || '' and we can simplify to password={password}

we can remove the null typing!

this can be simplified to
onChange: (password: string) => void
if that helps (as long as u change line 25 accordingly to
onChange={(e)=>onChange(e.target.value)}

while the "Passwords Do Not Match" error is in the correct place rn, to match designs, PasswordComplexity should be directly under the Password input (i.e. above Confirm Password)

let's change this to the standard format of component declaration:

export default function PassowordInput(
   {value, 
   onChange, 
   placeholder, 
   isVisible, 
   toggleVisibility, 
   name}:
   PasswordInputProps) {
...
}

Just flagging that it makes more sense for this error to only show up if user tries to submit without meeting requirements. it's fine for now but we may want to adjust the logic in the future

we may want to make the outermost container a form to improve the accessibility of this page.

here's some skeleton code from chatGPT

import React, { useState } from "react";

export default function Signup() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [errorMessage, setErrorMessage] = useState("");

  const isFormValid = email && password && confirmPassword && password === confirmPassword;

  const handleSignUp = (e) => {
    e.preventDefault(); // Prevent default form submission behavior

    // Clear error message and proceed with sign-up logic
    setErrorMessage("");
    // Add your sign-up logic here
  };

  return (
    <form onSubmit={handleSignUp}>
      <input
        name="email"
        onChange={(e) => setEmail(e.target.value)}
        value={email}
        placeholder="Email"
        required
      />
      <input
        type="password"
        name="password"
        onChange={(e) => setPassword(e.target.value)}
        value={password}
        placeholder="Password"
        required
      />
      <input
        type="password"
        name="confirmPassword"
        onChange={(e) => setConfirmPassword(e.target.value)}
        value={confirmPassword}
        placeholder="Confirm Password"
        required
      />
      {errorMessage && <p style={{ color: "red" }}>{errorMessage}</p>}
      <button type="submit" disabled={!isFormValid}>
        Sign up
      </button>
    </form>
  );
}